<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.6.3/lib/theme-chalk/index.css">
</head>
<body>
<el-form :model="ruleForm" >
    <div id="app">
        ID: <el-input v-model="id"  :disabled="true" placeholder="${id!''}"></el-input>
        项目名称: <el-input v-model="itemName" placeholder="${itemName!''}"></el-input>
        项目金额: <el-input v-model="itemMoney" placeholder="${itemMoney!''}"></el-input>
        羡慕备注: <el-input v-model="itemRemark" placeholder="${itemRemark!''}"></el-input>
        项目注意事项: <el-input v-model="itemProgr" placeholder="${itemProgr!''}"></el-input>
        项目负责人员:  <el-input v-model="itemPayAttention" placeholder="${itemPayAttention!''}"></el-input>
        <el-button type="primary" @click="handleAduit('ruleForm')">提交</el-button>
        <el-button type="primary" @click="handleAduit('ruleForm')" >取消</el-button>
    </div>
</el-form>
</body>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    var Main = {
        data() {
            return {
                id:'',
                itemName: '',
                itemMoney: '',
                itemRemark: '',
                itemProgr: '',
                itemPayAttention: ''
            }
        },
        methods: {
            //提交更新
            handleAduit(ruleForm) {
                    this.$http.post('/findAll/updateItem', {
                        'id': this.ruleForm.id,
                        'itemName': this.ruleForm.itemName,
                        'itemMoney': this.ruleForm.itemMoney,
                        'itemRemark': this.ruleForm.itemRemark,
                        'itemProgr': this.ruleForm.itemProgr,
                        'itemPayAttention': this.ruleForm.itemPayAttention,
                    }, {
                        /*
                        * 启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。form形式传给后台，而非json形式。
                        * */
                        emulateJSON: true
                    }).then(function(res) {
                        //设置
                        if(res.data.code == '0') {
                            this.$message({
                                message: "添加成功",
                                type: 'success'
                            });
                            setTimeout(function(){
                                window.location.reload()
                            },1500)
                            window.location.href='/findAll'
                        } else {
                            this.$message({
                                message: res.body.message,
                                type: 'error'
                            })
                            return;
                        }
                    })
            },
        },
        //取消
        handleAduit(ruleForm){
            window.location.href='/findAll'
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>